<template>
  <CardItem tabName="服务状态" :hasHistory="false">
    <template #real>
      <Row class="row-data">
        <Col :span="19">MQTT预警服务</Col>
        <template v-if="!loading">
          <template v-if="pageData.onlineStatus == '1'">
            <Col :span="1"
              ><component
                :is="getMqttStatus(dataInfo.mqttStatus).icon"
                :style="getMqttStatus(dataInfo.mqttStatus).style"
            /></Col>
            <Col :span="4">{{ getMqttStatus(dataInfo.mqttStatus).text }}</Col>
          </template>
          <Col v-else :span="4">--</Col>
        </template>
        <template v-else>
          <Col :span="4">
            <div style="text-align: center">
              <Spin /></div
          ></Col>
        </template>
      </Row>
      <Row class="row-data">
        <Col :span="19">NTP对时服务</Col>
        <template v-if="!loading">
          <template v-if="pageData.onlineStatus == '1'">
            <Col :span="1"
              ><component
                :is="icon(dataInfo.ntpTimeStatus).icon"
                :style="icon(dataInfo.ntpTimeStatus).style"
            /></Col>
            <Col :span="4">{{
              dataInfo.ntpTimeStatus == '1'
                ? '对时成功'
                : dataInfo.ntpTimeStatus == '2'
                  ? '对时服务关闭 '
                  : '对时失败'
            }}</Col>
          </template>
          <Col v-else :span="4">--</Col>
        </template>
        <template v-else>
          <Col :span="4">
            <div style="text-align: center">
              <Spin /></div
          ></Col>
        </template>
      </Row>
      <Row class="row-data">
        <Col :span="19">定位服务</Col>
        <template v-if="!loading">
          <template v-if="pageData.onlineStatus == '1'">
            <Col :span="1"
              ><component
                :is="icon(dataInfo.gpsStatus).icon"
                :style="icon(dataInfo.gpsStatus).style"
            /></Col>
            <Col :span="4">{{
              dataInfo.gpsStatus == '1'
                ? '定位成功'
                : dataInfo.gpsStatus == '2'
                  ? '定位服务关闭 '
                  : '定位失败'
            }}</Col>
          </template>
          <Col v-else :span="4">--</Col>
        </template>
        <template v-else>
          <Col :span="4">
            <div style="text-align: center">
              <Spin /></div
          ></Col>
        </template>
      </Row>
      <Row class="row-data">
        <Col :span="19">文件服务</Col>
        <template v-if="!loading">
          <template v-if="pageData.onlineStatus == '1'">
            <Col :span="1"
              ><component
                :is="icon(dataInfo.fileStatus).icon"
                :style="icon(dataInfo.fileStatus).style"
            /></Col>
            <Col :span="4">{{
              dataInfo.fileStatus == '1'
                ? '连接成功'
                : dataInfo.fileStatus == '2'
                  ? '文件服务关闭 '
                  : '连接失败'
            }}</Col>
          </template>
          <Col v-else :span="4">--</Col>
        </template>
        <template v-else>
          <Col :span="4">
            <div style="text-align: center">
              <Spin /></div
          ></Col>
        </template>
      </Row>
      <Row class="row-data">
        <Col :span="19">屏显服务</Col>
        <template v-if="!loading">
          <template v-if="pageData.onlineStatus == '1'">
            <Col :span="1"
              ><component
                :is="icon(screenStatus).icon"
                :style="icon(screenStatus).style"
            /></Col>
            <Col :span="4">{{ screenStatus == '1' ? '开启' : '关闭' }}</Col>
          </template>
          <Col v-else :span="4">--</Col>
        </template>
        <template v-else>
          <Col :span="4">
            <div style="text-align: center">
              <Spin /></div
          ></Col>
        </template>
      </Row>
      <Row class="row-data">
        <Col :span="19">管理服务状态</Col>
        <template v-if="!loading">
          <template v-if="pageData.onlineStatus == '1'">
            <Col :span="1"
              ><component
                :is="icon(dataInfo.nettyStatus).icon"
                :style="icon(dataInfo.nettyStatus).style"
            /></Col>
            <Col :span="4">{{
              dataInfo.nettyStatus == '1'
                ? '连接成功'
                : dataInfo.nettyStatus == '2'
                  ? '管理服务关闭 '
                  : '断开连接'
            }}</Col>
          </template>
          <Col v-else :span="4">--</Col>
        </template>
        <template v-else>
          <Col :span="4">
            <div style="text-align: center">
              <Spin /></div
          ></Col>
        </template>
      </Row>
      <Row class="row-data" v-if="pageData.deviceType != 3">
        <Col :span="19">备用管理服务状态</Col>
        <template v-if="!loading">
          <template v-if="pageData.onlineStatus == '1'">
            <Col :span="1"
              ><component
                :is="icon(dataInfo.alternateNettyStatus).icon"
                :style="icon(dataInfo.alternateNettyStatus).style"
            /></Col>
            <Col :span="4">{{
              dataInfo.alternateNettyStatus == '1'
                ? '连接成功'
                : dataInfo.alternateNettyStatus == '2'
                  ? '备用管理服务关闭 '
                  : '断开连接'
            }}</Col>
          </template>
          <Col v-else :span="4">--</Col>
        </template>
        <template v-else>
          <Col :span="4">
            <div style="text-align: center">
              <Spin /></div
          ></Col>
        </template>
      </Row>
    </template>
  </CardItem>
</template>

<script setup lang="tsx">
import { onMounted, onUnmounted, ref } from 'vue';
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons-vue';
import { Col, Row, Spin } from 'ant-design-vue';
import { getScreenInfo } from '@/api/device';
import { getDeviceRealTimeData } from '@/api/device';
import CardItem from '../comm/CardItem.vue';

defineOptions({
  name: 'Server',
});

interface Props {
  pageData: any;
  realTimeData: any;
}
const inter: any = ref(null);
const props = defineProps<Props>();
const dataInfo: any = ref([]);
dataInfo.value = props.realTimeData;
const screenStatus = ref('2');
if (props.pageData.onlineStatus == '1') {
  const res: any = await getScreenInfo(props.pageData.code);
  screenStatus.value = res.data.status;
}

const getMqttStatus = (status: any) => {
  switch (status) {
    case '0':
      return {
        text: '连接失败',
        icon: CloseCircleOutlined,
        style: { color: '#cd201f', fontSize: '20px' },
      };
    case '1':
      return {
        text: 'MQTT 连接成功(主)',
        icon: CheckCircleOutlined,
        style: { color: '#87d068', fontSize: '20px' },
      };
    case '2':
      return {
        text: '连接关闭',
        icon: InfoCircleOutlined,
        style: { color: 'orange', fontSize: '20px' },
      };
    case '3':
      return {
        text: 'MQTT 连接成功(备)',
        icon: CheckCircleOutlined,
        style: { color: '#87d068', fontSize: '20px' },
      };
    default:
      return {
        text: '连接失败',
        icon: CloseCircleOutlined,
        style: { color: '#cd201f', fontSize: '20px' },
      };
  }
};

const icon = (value: any) => {
  return value === '1'
    ? {
        icon: CheckCircleOutlined,
        style: { color: '#87d068', fontSize: '20px' },
      }
    : value === '2'
      ? {
          icon: InfoCircleOutlined,
          style: { color: 'orange', fontSize: '20px' },
        }
      : {
          icon: CloseCircleOutlined,
          style: { color: '#cd201f', fontSize: '20px' },
        };
};
const loading = ref(false);
const getInfo = async () => {
  loading.value = true;
  getDeviceRealTimeData(props.pageData.deviceId).then((res) => {
    dataInfo.value = res.data || {};
    loading.value = false;
  });
};

onMounted(() => {
  inter.value = setInterval(() => {
    getInfo();
  }, 60000);
});
onUnmounted(() => {
  clearInterval(inter.value);
  inter.value = null;
});
</script>

<style lang="scss" scoped>
:deep(.ant-spin) {
  .ant-spin-dot {
    width: 15px;
    height: 15px;
  }
}
</style>
